import React from 'react';
import ReactDOM from 'react-dom';

import baiqiimg from './img/baise.png'
import blackimg from './img/Black.png'
import qipanimg from './img/qi.png'
import reportWebVitals from './reportWebVitals';
import './CSS/wuziqi.css'
import { algs } from './alg'

// 继承React
class ShoppingList extends React.Component {
  /**
   * 初始化state
   * @param {*} props 
   */
  constructor(props) {
    super(props);
    this.state = {
      "condition": Array(19 * 19).fill(null),
      "isHea": true,
      "axis": Array(19 * 19).fill(null),
      "id": 0,

      "victory": false

    }

  }

  /**
   * 生棋桌图片，并对其进行标记
   * @param {标记div和img} id 
   * @param {坐标} x 
   * @param {坐标} y 
   * @returns 
   */
  dd = (id, x, y) => {
    return (
      <div id="div1" onClick={this.state.condition[id] == null ? this.state.victory ? null : (e => this.butt({ value: x, value1: y }, id)) : null}>

        <img id="img1" src={this.state.condition[id] == null ? qipanimg : this.state.condition[id]} />

      </div>
    )
  }

  /**
   * 五子连棋算法
   * @param {json对象，用于放坐标} date 
   * @param {每一个方框的标记} id 
   */
  butt = (date, id) => {
    let x = date.value;
    let y = date.value1;
    let isHea = this.state.isHea;
    const condition = this.state.condition.slice();
    const axis = this.state.axis.slice();
    condition[id] = isHea ? blackimg : baiqiimg;
    let jso = { "isHea": isHea, "x": x, "y": y };
    axis[id] = jso;
    this.setState({ "condition": condition, "isHea": !isHea, "axis": axis, "id": id });

    //判断胜利方
    if (algs.call(this, jso)) {
      this.setState({ victory: true,id:null});
      alert(isHea ? "黑棋胜利！" : "白棋胜利！");
    }
  }

  // 悔棋按钮与重新游戏按钮
  anniu = () => {
    return (
      <div>
        <button id="button1" onClick={this.Undo}>悔棋</button>,

        <button id="button2" onClick={this.shuaxin}>重新游戏</button>
      </div>
    )
  }

  // 执行悔棋方法
  Undo = () => {
    if (this.state.id != null) {
      let id = this.state.id;
      const condition = this.state.condition.slice();
      const aixs = this.state.axis.slice();
      condition[id] = null;
      aixs[id] = null;
      this.setState({ condition: condition, aixs: aixs, id: null, isHea: !this.state.isHea });
    }
  }

  // 执行重新游戏方法
  shuaxin = () => {
    this.setState(
      {
        "condition": Array(19 * 19).fill(null),
        "isHea": true,
        "axis": Array(19 * 19).fill(null),
        "id": 0,
        "victory": false
      }
    );
  }

  /**
   * 生成棋桌
   * @returns 
   */
  qizhuo = () => {

    var res = [];
    var c = 0;

    for (let x = 0; x < 19; x++) {
      for (let y = 0; y < 19; y++) {
        this.setState();
        res.push(this.dd(c, x, y));
        c++;
      }
    }
    return res;
  }

  // 输出白棋
  baiqi = () => {
    return (
      <img id="img1" src={this.baiqiimg}></img>
    )
  }

  // 该类的最后一步，输出结果
  render() {
    return (
      <div>
        <div className={this.state.isHea ? "min" : "ming"} >
          {this.qizhuo()}
        </div>
        {this.anniu()}
      </div>
    );
  }
}

// 虚拟DOM转换为真实DOM并渲染到桌面上
ReactDOM.render(
  <React.StrictMode>
    <ShoppingList />
  </React.StrictMode>,
  document.getElementById('root')
);

